<template>
	<view class="cont">
		<!-- <view class="back" /> -->
		<!-- 搜索 -->
		<view class="search">
			<v-search :disabled="true" type="buy"></v-search>
		</view>
		<view class="line"></view>
		<!-- 轮播图 type=three 3d样式 card 卡片样式 -->
		<v-swiper :list="swipers" type="three" :autoplay="autoplay"></v-swiper>
		<!-- 菜单选项 -->
		<v-menu></v-menu>
		<!-- 买券数组 -->
		<view class="list">
			<block v-for="item in buyList" :key="item.id">
				<buy-item :item="item"></buy-item>
			</block>

			<!--正在加载 start-->
			<v-loadmore :visible="load"></v-loadmore>
			<!--正在加载 end-->

			<!--没有更多了 start-->
			<v-nomore :visible="!load && isMore"></v-nomore>
		</view>

		<loading v-if="loading"></loading>
		<v-tips v-if="isTips == 0" @remove="onShutTips"></v-tips>
		<view class="bottom_shadow"></view>
	</view>
</template>

<script>
	import vSearch from "@/components/Search.vue"
	import vSwiper from "@/components/Swiper.vue"
	import vMenu from "@/components/Menu.vue"
	import BuyItem from "@/components/BuyItem.vue"
	import SellItem from "@/components/SellItem.vue"
	import vNomore from "@/components/load/nomore.vue"
	import vLoadmore from "@/components/load/loadmore.vue"
	import VTips from "@/components/Tips.vue"
	import TabModule from '@/Api/Tab.js'

	export default {
		components: {
			vSearch,
			vSwiper,
			vMenu,
			BuyItem,
			vNomore,
			vLoadmore,
			VTips
		},
		data() {
			return {
				loading: true,
				autoplay: true,
				swipers: [],
				current_page: 0,
				isMore: false,
				load: true,
				buyList: [],
				isTips: 1
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		onLoad(obj) {
			obj.userid ? this.getIndex(obj.userid) : this.getIndex()
			this.isTips = uni.getStorageSync('isTips') || 0
		},
		methods: {
			getIndex(userid = '') {
				TabModule.getIndex(userid)
					.then(res => {
						this.swipers = res.slide
						// 获取买券数据
						this.getBuyTicketList()
						// 停止页面刷新
						uni.stopPullDownRefresh()
					})
			},

			getBuyTicketList() {
				this.load = true
				let {
					current_page,
					buyList
				} = this
				TabModule.getBuyTicketList(current_page)
					.then((res) => {
						if (current_page == 0) buyList = []
						let onMore = false
						let len = res.data.length
						len > 0 ? res.data.forEach(item => buyList.push(item)) : onMore = true
						this.buyList = buyList
						this.load = false
						this.current_page = res.current_page
						this.isMore = len < res.per_page ? true : false
						this.onMore = onMore
						this.loading = false
					})
			},
			onShutTips() {
				this.isTips = 1
				uni.setStorageSync('isTips', 1)
			}
		},

		// 下拉回调方法
		onPullDownRefresh() {
			this.current_page = 0
			this.isMore = false
			this.load = true
			this.getIndex()
		},

		// 上拉回调方法
		onReachBottom() {
			if (!this.isMore) {
				this.getBuyTicketList()
			}
		},
		// 监听页面显示
		onShow() {
			this.autoplay = true
		},
		// 监听页面隐藏
		onHide() {
			this.autoplay = false
		},
		// 监听页面卸载
		onUnload() {
			this.autoplay = false
		},
		onShareAppMessage() {
			let {
				nickName,
				id
			} = this.userInfo
			return {
				title: `${nickName}发现了一个好东西跟你分享`,
				path: id ? `/pages/Tab/BuyTicket/BuyTicket?userid=${id}` : '/pages/Tab/BuyTicket/BuyTicket',
				imageUrl: '/static/share.png'
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.cont {
		position: relative;
		overflow-x: hidden;
	}

	.search {
		height: 100upx;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}

	.line {
		height: 100upx;
	}

	.back {
		position: absolute;
		width: 1000upx;
		top: -180upx;
		right: -16%;
		height: 530upx;
		background: #49CD82;
		border-radius: 50% / 50%;
		z-index: -1;
	}

	// .search-cont{
	// 	background-color: #49CD82 !important;
	// 	.search{
	// 		background-color: #fff !important;
	// 	}
	// }

	.list {
		padding-bottom: 30upx;
	}
</style>
